<style lang="less">
	@import "../../../styles/table-common.less";
</style>
<template>
	<div class="search">
		<Card>
			<Row class="operation">
				<Button @click="add" type="primary" icon="md-add">添加轮播图</Button>
				<Button @click="delAll" icon="md-trash">批量删除</Button>
			</Row>
			<Row>
				<Alert show-icon>
					已选择
					<span class="select-count">{{ this.selectList.length }}</span> 项
					<a class="select-clear" @click="clearSelectAll">清空</a>
				</Alert>
			</Row>
			<Row>
				<Table :loading="loading" border :columns="columns" :data="data" sortable="custom" @on-sort-change="changeSort"
				 @on-selection-change="showSelect" ref="table"></Table>
			</Row>
			<!-- <Row type="flex" justify="end" class="page">
				<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
				 @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator
				 show-sizer></Page>
			</Row> -->
		</Card>

		<addEdit
      :data="form"
      :type="showType"
      v-model="showUser"
      @on-submit="getDataList"
    />
	</div>
</template>

<script>
	import {
		getSwiperList,
		removeSwipers,
	} from "@/api/index";
	import addEdit from "./addEdit.vue";
	export default {
		name: "user-manage",
		components: {
			addEdit
		},
		data() {
			return {
				height: 510,
				showUser: false,
				showType: "0",
				loading: true,
				selectList: [],
				searchKey: "",
				searchForm: {
					pageNumber: 1,
					pageSize: 10,
					sort: "createTime",
					order: "desc"
				},
				form: {},
				columns: [{
						type: "selection",
						width: 60,
						align: "center",
						fixed: "left",
					},
					{
						type: "index",
						width: 60,
						align: "center",
						fixed: "left",
					},
					{
						title: "图片",
						key: "pic",
						minWidth: 125,
						render: (h, params) => {
							return h('div', {
								attrs: {
									style: 'width: 40px;height: 40px;'
								},
							}, [
								h('img', {
									props: {
										type: 'primary',
										size: 'small'
									},
									attrs: {
										src: params.row.pic,
										style: 'width: 40px;height: 40px;border-radius: 2px;'
									},
									style: {},
								}),
							]);
						},
					},
					{
						title: "链接",
						key: "url",
						sortType: "desc",
						width: 180,
					},
					{
						title: "创建时间",
						key: "createTime",
						sortable: true,
						sortType: "desc",
						width: 180,
					},
					{
						title: "操作",
						key: "action",
						width: 170,
						align: "center",
						fixed: "right",
						render: (h, params) => {
							return h("div", [
								h(
									"a", {
										on: {
											click: () => {
												this.edit(params.row);
											},
										},
									},
									"编辑"
								),
								h("Divider", {
									props: {
										type: "vertical",
									},
								}),
								h(
									"a", {
										on: {
											click: () => {
												this.remove(params.row);
											},
										},
									},
									"删除"
								),
							]);
						},
					},
				],
				data: [],
				total: 0
			};
		},
		methods: {
			init() {
				this.getDataList();
			},
			changePage(v) {
				this.searchForm.pageNumber = v;
				this.getDataList();
				this.clearSelectAll();
			},
			changePageSize(v) {
				this.searchForm.pageSize = v;
				this.getDataList();
			},
			getDataList() {
				// 多条件搜索用户列表
				this.loading = true;
				getSwiperList().then((res) => {
					this.loading = false;
					if (res.success) {
						this.data = res.result;
					}
				});
			},
			changeSort(e) {
				this.searchForm.sort = e.key;
				this.searchForm.order = e.order;
				if (e.order == "normal") {
					this.searchForm.order = "";
				}
				this.getDataList();
			},
			add() {
				this.showType = "2";
				this.showUser = true;
			},
			edit(v) {
				// 转换null为""
				for (let attr in v) {
					if (v[attr] == null) {
						v[attr] = "";
					}
				}
				let str = JSON.stringify(v);
				let data = JSON.parse(str);
				this.form = data;
				this.showType = "1";
				this.showUser = true;
			},
			remove(v) {
				this.$Modal.confirm({
					title: "确认删除",
					content: "您确认要删除用户 " + v.username + " ?",
					loading: true,
					onOk: () => {
						removeSwipers({
							ids: v.id
						}).then((res) => {
							this.$Modal.remove();
							if (res.success) {
								this.clearSelectAll();
								this.$Message.success("删除成功");
								this.getDataList();
							}
						});
					},
				});
			},
			showSelect(e) {
				this.selectList = e;
				this.selectList.length = e.length;
			},
			clearSelectAll() {
				this.$refs.table.selectAll(false);
			},
			delAll() {
				if (this.selectList.length <= 0) {
					this.$Message.warning("您还未选择要删除的数据");
					return;
				}
				this.$Modal.confirm({
					title: "确认删除",
					content: "您确认要删除所选的 " + this.selectList.length + " 条数据?",
					loading: true,
					onOk: () => {
						let ids = "";
						this.selectList.forEach(function(e) {
							ids += e.id + ",";
						});
						ids = ids.substring(0, ids.length - 1);
						removeSwipers({
							ids: ids
						}).then((res) => {
							this.$Modal.remove();
							if (res.success) {
								this.$Message.success("删除成功");
								this.clearSelectAll();
								this.getDataList();
							}
						});
					},
				});
			},
		},
		mounted() {
			// 计算高度
			this.height = Number(document.documentElement.clientHeight - 230);
			this.init();
		},
	};
</script>
